<template>
  <div class="main-block-2">
    <div class="title">集群状态</div>
    <div class="subtitle">外网集群健康指数</div>
    <div class="statusbar-wrapper">
      <status-bar label="hadoop" :num="status.hadoop"></status-bar>
      <status-bar label="hbase" :num="status.hbase"></status-bar>
      <status-bar label="es" :num="status.es"></status-bar>
      <status-bar label="mongodb" :num="status.mongodb"></status-bar>
      <status-bar label="redis" :num="status.redis"></status-bar>
    </div>
    <div class="round">
      <img src="./img/main-block-2-round1.png" class="round-item">
      <img src="./img/main-block-2-round2.png" class="round-item">
      <img src="./img/main-block-2-round3.png" class="round-item">
      <img src="./img/main-block-2-round4.png" class="round-item">
      <img src="./img/main-block-2-round5.png" class="round-item">
      <img src="./img/main-block-2-round6.png" class="round-item">
    </div>
    <div class="score">{{score}}分</div>
  </div>
</template>

<script>
import {randint, contain} from 'utils/random'
import StatusBar from './StatusBar'
var out = {};
var status = {};
status.hadoop = 30;
status.hbase = 55;
status.es = 80;
status.mongodb = 61;
status.redis = 95;

out.status = status;

setInterval(function(){
  for(let k in status){
    if(randint(2) == 0){
      status[k] += randint(-3, 3);
      status[k] = contain(status[k], 0, 100);
    }
  }
}, 1000)

export default {
  name: 'block2',
  components: {StatusBar},
  data(){
    return out;
  },
  computed: {
    score(){
      var out = 0;
      for(let k in this.status){
        out += this.status[k]
      }
      out = Math.ceil(out / 5)
      return out
    }
  }
}
</script>

<style scoped>
.main-block-2{
  position: absolute;
  background-image: url(./img/main-block-2.png);
  background-size: 100% 100%;
  left: 3.15vh;
  bottom: 5.56vh;
  width: 52.59vh;
  height: 28.8vh;
  filter: drop-shadow(0 0 7px #0057b8);
}
.title{
  position: absolute;
  color: #b8fdff;
  font-size: 2.4vh;
  left: 5.65vh;
  top: 2.5vh;
}
.subtitle{
  position: absolute;
  color: white;
  font-size: 1.92vh;
  left: 23.33vh;
  text-align: center;
  width: 26.94vh;
  top: 5.5vh;
}
.statusbar-wrapper{
  position: absolute;
  top: 10.8vh;
  left: 3.6vh;
}
.status-bar{
  margin-bottom: 2.1vh;
}
.round{
  position: absolute;
  right: 4.26vh;
  width: 15.65vh;
  height: 15.65vh;
  bottom: 3.3vh;
}
.round-item{
  position: absolute;
  width: 15.65vh;
  height: 15.65vh;
}
.round-item:nth-child(1){
  animation: rotate 6s linear infinite;
}
.round-item:nth-child(2){
  animation: reRotate 1s ease infinite;
}
.round-item:nth-child(3){
  animation: randomRotate3 1.8s linear infinite alternate;
}
.round-item:nth-child(4){
  animation: randomRotate4 3.8s ease infinite alternate;
}
.round-item:nth-child(6){
  animation: randomRotate1 6.2s ease infinite alternate;
}
.score{
  font-size: 1.92vh;
  position: absolute;
  left: 38.5vh;
  top: 16.4vh;
  color: white;
}
</style>
